<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1 {
        width: 100px;
        height: 100px;
        background-color: blue;
        text-align: center;
    }

    .box2 {
        width: 50px;
        height: 50px;
        background-color: red;
        /* text-align: inherit; */
    }
</style>

<body>
    检测数据类型(4中)
    <div class="box1">
        111
        <div class="box2">222</div>
    </div>
</body>
<script>
    //1.typeof() 用于检测基本数据类型 对于引用数据类型就不管用 结果是object
    console.log(typeof ('df'));//string
    console.log(typeof (123));//number
    console.log(typeof (true));//Boolean
    console.log(typeof (undefined));//undefined
    console.log(typeof (null));//object  因为typeof是直接在计算机里面基于二进制值进行检测的，也就是数据类型都是二进制值，对象存储在计算机中，二进制的值都是以000开头，而null值为000，所以typeof(null)为object


    // 2.instanceof() 用于检测引用数据类型 对于基本数据类型就不管用 结果是false
    console.log([1, 2, 3] instanceof Array);//true
    console.log('123' instanceof String);//false
    console.log(123 instanceof Number);//false
    console.log(true instanceof Boolean);//false
    console.log({ name: '小红' } instanceof Object);//true
    console.log('obj', [1, 2, 3] instanceof Object) //true  会顺着原型链往上找
    const fn = function () {
        alert(123)
    }
    console.log(fn instanceof Function);//true


    // 3.constructor() 几乎可以判断基本类型和引用数据类型，
    console.log("3.", ('123').constructor === String);//true
    console.log([1, 2, 3, 0].constructor === Array);//true

    // 但是缺点是我们可以随意更改constructor，如果把constructor的指向修改了，那就不行了
    let arr = []
    Array.prototype.constructor = 'a'  //更改constructor
    console.log(arr.constructor === Array)//false
    const obj = {}
    console.log("4.", obj.constructor === Object);//true

    // 4.Object.prototype.toString.call()
    const a = Object.prototype.toString
    console.log(a.call(123));//[object Number]
    console.log(a.call("123"));//[object String]
    console.log(a.call(true));//[object Boolean]
    console.log(a.call(null));//[object Null]
    console.log(a.call(undefined));//[object Undefined]
    console.log(a.call([1, 2, 3]));//[object Array]
    console.log(a.call({}));//[object Object]
    function ff() {
        alert(123)
    }
    console.log(a.call(ff));//[object Function]
</script>


</html>